<template>
  <view class="index-content">
    <u-navbar :safeAreaInsetTop="true" :placeholder="true" :fixed="true" leftIcon=" " title="首页"
              bgColor="#f3f4f6"></u-navbar>
    <view class="index-block">
      <view class="index-block-title">运行统计</view>
      <u-row gutter="16">
        <u-col span="4">
          <view class="item-tj item-tj-frist">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <u-icon name="photo" color="#fff"></u-icon>
                <text>在线人数</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="0" :endVal="149" :duration="1500" color="#fff" separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="item-tj item-tj-second">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <u-icon name="photo" color="#fff"></u-icon>
                <text>今日新增</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="1" :endVal="2349" :duration="1500" color="#fff" separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="item-tj item-tj-thrid">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <u-icon name="photo" color="#fff"></u-icon>
                <text>总人数</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="1" :endVal="1249350" :duration="1500" color="#fff" separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="index-block">
      <view class="index-block-title">近7天访问量统计</view>
      <view>
        <qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
                          :opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
                          :chartData="historyData"/>
      </view>
      <view class="index-block-title">访问量统计</view>
      <view>
        <qiun-data-charts type="bar" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
                          :opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}"
                          :chartData="historyData"/>
      </view>
    </view>
    <view class="index-block">
      <view class="index-block-title">数据总览</view>
      <view class="detail_list">
        <view v-for="(item,index) in detail_list" :key="index" class="detail_item">
          <view>
            <view class="font-middle">{{ item.date }}</view>
            <view class="font-small">{{ item.time }}</view>
          </view>
          <view class="icon">
            <li :class="['iconfont',item.type == 'income'?'icon-income':'icon-expend']"></li>
          </view>
          <view class="right_content">
            <view class="money">{{ item.type == 'income' ? '+' : '-' }}{{ item.money }}</view>
            <view class="text-gray font-middle">{{ item.desc }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

let _now = new Date();
let now_time = {};
now_time.year = _now.getFullYear()
now_time.month = _now.getMonth() + 1
now_time.day = _now.getDay()

export default {
  components: {},
  data() {
    return {
      isCanvas2d: true,
      delayload: false,
      historyData: {
        "categories": [
          "1月",
          "2月",
          "2月",
          "4月",
          "5月"
        ],
        "series": [
          {
            "name": "收入情况",
            "data": [1601, 1840.5, 1900, 1760, 1500.85],
            "type": "line",
            "style": "curve",
            "color": "#4ECDB6",
            "unit": ""
          }
        ],
        "yAxis": [
          {
            "calibration": true,
            "position": "left",
            "title": "单位/元",
            "titleFontSize": 12,
            "unit": "",
            "tofix": 0,
            "min": 0,
            "disableGrid": true
          }
        ]
      },
      detail_list: [
        {date: now_time.month + "-01", time: "11:01", "type": "extend", money: "10.00", desc: "银行卡转出"},
        {date: now_time.month + "-01", time: "13:45", "type": "income", money: "18.00", desc: "银行卡收入"},
        {date: now_time.month + "-02", time: "06:21", "type": "extend", money: "123.45", desc: "信用卡转出"},
        {date: now_time.month + "-03", time: "07:38", "type": "income", money: "23.00", desc: "银行卡收入"},
        {date: now_time.month + "-08", time: "16:28", "type": "extend", money: "23.56", desc: "信用卡转出"},
        {date: now_time.month + "-09", time: "15:25", "type": "income", money: "850.12", desc: "银行卡收入"},
        {date: now_time.month + "-09", time: "18:52", "type": "income", money: "1.88", desc: "银行卡收入"},
        {date: now_time.month + "-11", time: "21:12", "type": "extend", money: "220.21", desc: "银行卡转出"},
        {date: now_time.month + "-12", time: "13:08", "type": "income", money: "32.28", desc: "银行卡收入"},
        {date: now_time.month + "-12", time: "12:41", "type": "extend", money: "122.12", desc: "信用卡转出"},
        {date: now_time.month + "-13", time: "17:21", "type": "income", money: "10.00", desc: "银行卡收入"},
      ]
    }
  }
}
</script>

<style lang="scss">
.index-content {
  background-color: $uni-bg-color;
  min-height: 100vh;
}
.index-block {
  padding: 40rpx;
  background-color: $uni-bg-color;
}
.index-block-title {
  font-size: 40rpx;
  font-weight: bold;
  padding: 0 0 40rpx 0;
}
.item-tj {
  width: 100%;
  height: 160rpx;
  border-radius: 16rpx;

  &-frist {
    background-color: rgba($color: #2979ff, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-second {
    background-color: rgba($color: #303133, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-thrid {
    background-color: rgba($color: #19be6b, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}
.detail_list{
  height: 700rpx;
  overflow: auto;
  color: #9E9E9E;
  .detail_item{
    display: flex;
    margin: 20rpx 0;
    align-items: center;
    .icon{
      width: 30%;
      text-align: center;
      li{
        font-size: 80rpx;
      }
    }
    .right_content{
      width: 50%;
      text-align: center;
    }
    .icon-income{
      color:#4AABF9;
    }
    .icon-expend{
      color: #E45521;
    }
    .money{
      color: #000;
    }
  }
}
</style>
